<template>
  <view class="shangpinshangjia">
    <view class="top">
      <image src="../../static/businessImg/back.png" class="topback" @click="back">
      </image>
      <view class="topname"> 商品类型 </view>
    </view>

    <view class="cneter">
      <view class="addBtn" @click="handleAddSku">
        新增类型 <u-icon name="plus"></u-icon>
      </view>

      <view class="dataItem" v-for="item in data" @click="handleTagClick(item)">
        <view class="">
          {{ item.name }}
        </view>

        <view class="">
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
    </view>

    <u-popup v-model="show" mode="center" :mask-close-able="false" width="90%">
      <view class="skupopup">
        <view class="skupopuptitle">
          {{ skuadd ? "添加商品类型" : "修改商品类型" }}
        </view>
        <u-form :model="skuForm" ref="skuForm" label-position="left" label-width="150" style="margin-top: 30rpx">
          <u-form-item label="类型名称" prop="name">
            <u-input v-model="skuForm.name" placeholder="请填写类型名称" />
          </u-form-item>
        </u-form>

        <view class="uploadtitle" style="padding-top: 37rpx; display: flex; align-items: center">
          类型图片
        </view>

        <view class="uploadingview">
          <view class="imageimg" v-if="skuImages != ''">
            <u-image width="100%" height="100%" :src="skuImages"></u-image>
            <view class="deldiv" @click="delskuImages()"> </view>
          </view>
          <view class="imageimg" @click="chooseskupic" v-if="skuImages == ''">
            <u-image width="218rpx" height="218rpx" src="../../static/businessImg/add.png" mode="">
            </u-image>
          </view>
        </view>

        <view class="skupopupbtn">
          <view class="skupopupadd" @click="handleAddSkuTolist">
            {{ skuadd ? "添加" : "修改" }}
          </view>
          <view class="skupopupadd" @click="handleDeleteList" v-if="!skuadd">
            删除
          </view>
          <view class="skupopupadd" @click="show = false"> 取消 </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {
  proTypeList,
  addStoreType,
  updStoreType,
  delStoreType,
} from "@/api/storeAdmin.js";

import storage from "../../utils/storage";
export default {
  data() {
    return {
      skuForm: {
        name: "",
        price: "",
      },
      skuadd: false,
      skuImages: "",
      show: false,
      data: [],
      currentId: "",
      from: "gys",
    };
  },

  onLoad(option) {
    this.from = option.from;
    console.log(this.from);
  },

  onShow() {
    this.getData();

  },
  methods: {
    back() {
      if (this.from == "gys") {
        uni.navigateBack()
      } else {
        uni.navigateBack()
      }
    },

    getData() {
      proTypeList({
        id: storage.getUserInfo().storeId,
      }).then((res) => {
        this.data = res.data;
      });
    },

    handleAddSku() {
      this.show = true;
      this.skuForm = {
        name: "",
      };
      this.skuImages = "";
      this.skuadd = true;
    },

    delskuImages() {
      this.skuImages = "";
    },

    handleAddSkuTolist() {
      const { name } = this.skuForm;
      if (name == "") {
        return uni.showToast({
          icon: "none",
          title: "请填写信息",
        });
      }

      if (this.skuImages == "") {
        return uni.showToast({
          icon: "none",
          title: "请选择规格图片",
        });
      }

      if (this.skuadd) {
        addStoreType({
          name,
          storeId: storage.getUserInfo().storeId,
          image: this.skuImages,
        })
          .then((res) => {
            uni.showToast({
              title: "保存成功！",
              icon: "none",
            });
            // this.skuForm = {
            // 	name: '',

            // }
            this.$set(this.skuForm, "name", "");

            this.skuImages = "";
            this.show = false;
            this.getData();
          })
          .catch((_) => { });
      } else {
        updStoreType({
          name,
          storeId: storage.getUserInfo().storeId,
          image: this.skuImages,
          typeId: this.currentId,
        }).then((res) => {
          uni.showToast({
            title: "保存成功！",
            icon: "none",
          });

          this.$set(this.skuForm, "name", "");

          this.skuImages = "";
          this.show = false;
          this.getData();
        });
      }
    },

    handleDeleteList() {
      delStoreType({
        id: this.currentId,
      }).then((res) => {
        // uni.showToast({
        // 	title: "删除成功！",
        // 	icon: "none",
        // });

        this.$set(this.skuForm, "name", "");

        this.skuImages = "";
        this.show = false;
        this.getData();
      });
    },

    handleTagClick(item, index) {
      this.skuForm.name = item.name;

      this.skuImages = item.image;
      this.show = true;
      this.skuadd = false;
      this.currentId = item.id;
    },

    chooseskupic() {
      const that = this;

      uni.chooseImage({
        count: 1,
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], //从相册选择
        success: function (res) {
          const filePath = res.tempFilePaths[0];
          uni.uploadFile({
            url: "http://yzfl.ss5.tunnelfrp.com/yzfl/user/uploadImage", // 服务器上传接口
            filePath: filePath,
            name: "file", // 必须填写，后台用来接收文件

            success: function (uploadFileRes) {
              that.skuImages = JSON.parse(uploadFileRes.data).data;
            },
            fail: function (uploadFileErr) {
              console.log(uploadFileErr); // 上传失败后的操作
            },
          });
        },
      });
    },
  },
};
</script>

<style scoped>
.shangpinshangjia {
  width: 100%;
  min-height: 100vh;
  background: #f9f9f9;
}

.top {
  width: 100%;
  height: 188rpx;
  position: relative;
  background: #ffffff;
}

.topback {
  width: 16rpx;
  height: 29rpx;
  position: absolute;
  top: 106rpx;
  left: 32rpx;
}

.topname {
  width: 300rpx;
  height: 32rpx;
  text-align: center;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  font-size: 33rpx;
  color: #222222;
  line-height: 32rpx;
  position: absolute;
  top: 104rpx;
  left: 50%;
  transform: translateX(-50%);
}

::v-deep .u-input__input {
  text-align: right;
}

::v-deep .u-input--border {
  border: none !important;
}

::v-deep .u-form-item {
  border-bottom: 2rpx solid #f3f3f3;
}

::v-deep .uni-textarea-wrapper {
  text-align: left;
}

::v-deep .u-input__textarea {
  border-radius: 10rpx;
}

.uploadingview {
  margin-top: 50rpx;
  width: 100%;
  /* background: red; */
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  border-bottom: 1rpx solid #f9f9f9;
}

.imageimg {
  position: relative;
  width: 218rpx;
  height: 218rpx;
  padding: 15rpx;
  margin-bottom: 15rpx;

  /* margin-right: 10rpx; */

  image {
    width: 100%;
    height: 100%;
  }
}

.deldiv {
  width: 31rpx;
  height: 31rpx;
  background: url("../../static/businessImg/del.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: -10rpx;
  right: -10rpx;
}

::v-deep .u-model__footer {
  justify-content: space-around;
  /* padding-bottom: 20rpx; */
  height: 100rpx;
  align-items: center;
}

.skupopup {
  width: 100%;
  padding: 30rpx;
}

.skupopupbtn {
  width: 100%;
  height: 58rpx;
  margin-top: 30rpx;

  display: flex;
  align-items: center;
  justify-content: space-around;

  .skupopupadd {
    text-align: center;
    width: 30%;
    height: 100%;
    line-height: 58rpx;
    border-radius: 29rpx;
    background: rgb(132, 194, 87);
    color: #ffffff;
  }
}

.cneter {
  padding: 25rpx;
}

.addBtn {
  width: 200rpx;
  height: 50rpx;
  background: rgb(132, 194, 87);
  text-align: center;
  line-height: 50rpx;
  color: #ffffff;
}

.dataItem {
  width: 100%;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border-bottom: 1px solid #f3f3f3;
  margin-top: 10rpx;
  padding: 0 20rpx;
}
</style>
